<template>
  <el-dialog
    :visible.sync="state.visible"
    :fullscreen="fullscreen"
    :custom-class="!fullscreen ? 'custom-height': 'custom-fullscreen'"
    :close-on-click-modal="false"
    :show-close="false"
    @closed="close"
  >
    <el-row slot="title" type="flex">
      <el-col :span="20">{{ title }}</el-col>
      <el-col :span="4" style="text-align: right">
        <svg-icon
          :icon-class="!fullscreen ? 'fullscreen': 'exit-fullscreen'"
          style="cursor: pointer; margin-right: 10px"
          @click="() => {fullscreen = !fullscreen}"
        />
        <i class="el-icon-close" style="cursor: pointer" @click="close" />
      </el-col>
    </el-row>
    <el-form ref="dataForm" :model="form" label-position="right" label-width="100px">
      <el-row :gutter="18">
        <el-col :span="24">
          <el-form-item
            label="设备sn号"
          >
            <el-input
              v-model="form.macSn"
              placeholder="请输入设备sn号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="设备编号"
          >
            <el-input
              v-model="form.equipmentNumber"
              placeholder="请输入设备编号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="设备名称"
          >
            <el-input
              v-model="form.equipmentName"
              placeholder="请输入设备名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="设备型号"
          >
            <el-input
              v-model="form.equipmentModel"
              placeholder="请输入设备型号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="使用部门"
          >
            <el-input
              v-model="form.userDepartment"
              placeholder="请输入使用部门"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="管理负责人"
          >
            <el-input
              v-model="form.managementResponsiblePerson"
              placeholder="请选择管理负责人"
              @click.native="openUserModal"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="设备类型"
          >
            <el-input
              v-model="form.equipmentType"
              placeholder="请输入设备类型"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="设备图片"
          >
            <upload
              v-if="state.visible"
              v-model="form.equipmentPic"
              :prefix="filePrefix"
              :action="fileAction"
              :file-list="fileWrapper.equipmentPicList"
              :rel-obj-type="relObjType"
              rel-obj-field="equipmentPic"
              :limit-count="1"
              :is-image="true"
              list-type="picture-card"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">
        取消
      </el-button>
      <el-button type="primary" :loading="state.confirmSubmit" :disabled="state.confirmSubmit" @click="onSubmit">
        确定
      </el-button>
    </div>

    <user-modal ref="userModal" @OK="selectUserOK" />

  </el-dialog>
</template>

<script>
import form from '@/components/diboot/mixins/form'
import Upload from '@/components/diboot/components/upload/Upload'
import userModal from '@/components/userModal'
export default {
  name: 'EquipmentForm',
  components: {
    Upload,
    userModal
  },
  mixins: [form],
  data() {
    return {
      baseApi: '/equipment',
      filePrefix: '/api',
      fileAction: '/uploadFile/upload/dto',
      relObjType: 'Equipment',
      fileWrapper: {
        equipmentPicList: []
      },
      isUpload: true
    }
  },

  methods: {
    async enhance(values) {
      this.__setFileUuidList__(values)
    },
    async afterOpen(id) {
      this.form.status = 0
      if (id) {
        // 回显设备图片
        this.echoImgFile(id, 'equipmentPic')
      }
    },
    openUserModal() {
      this.$refs['userModal'].open()
    },
    // 弹框返回的数据
    selectUserOK(data) {
      console.log('data', data);
      let [userInfo] = data;
      let { id, realname } = userInfo;
      this.form.managementResponsiblePerson = realname;
    },
  }
}
</script>
<style lang="scss" scoped>
</style>
